<template>
  <div class="container">
    <!--<gantt class="left-container" :tasks="tasks"></gantt>-->
    <div ref="gantt" class="left-container"></div>
  </div>
</template>


<script>
  //import gantt from './gantt.vue';
  import {gantt} from 'dhtmlx-gantt';
  import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
  import * as Schedule from './schedule';
  import axios from 'axios';
  import Vue from 'vue';
  Vue.prototype.$ajax = axios
  export default {
    name: 'gantt',
    components: {gantt},
    data () {
      return {
        tasks: {
          data: []
        },
      }
    },
    mounted: function () {
      gantt.config.xml_date = "%Y-%m-%d";
      gantt.config.columns =  [
        {name:"key", label:"工单#",align:"left"},
        {name:"tester",label:"测试人员",align:"center" },
        {name:"start_date",label:"开始时间", align:"center" },
        {name:"end_date",label:"结束时间",align:"left"},
      ];
    },
    created() {
      this.loadData();
    },
    methods: {
      loadData(){
        Schedule.listSchedule().then((response) => {
          this.tasks.data = response.data || [];
          gantt.init(this.$refs.gantt);
          gantt.parse(this.tasks);
        });
      }
    }
  }
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 850px;
  }
</style>
